<template>
    <div>
      <div class="breadcrumb-main">
        <div class="breadcrumb-inner">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/web/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>集团新闻</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
      <div class="web-inner-main">
        <ul class="web-news-ul">
            <li v-for="item in newsList" :key="item.id">
                <img :src="item.coverImage"/>
                <div class="web-news-item">
                    <span>{{item.createTime | formatDate}}</span>
                    <h3>{{item.title}}</h3>
                    <p v-html="$options.filters.capitalize(item.content)"></p>
                    <el-button type="primary" size="mini" @click="findDetails(item.id)" icon="el-icon-d-arrow-right">详情</el-button>
                </div>
            </li>
        </ul>
        <el-empty v-if="newsList.length === 0" :image-size="200"></el-empty>
        <div class="block" v-if="total > 0" style="overflow: hidden;padding: 20px 0;">
            <el-pagination
                style="float: right;"
                :page-size="5"
                layout="total,prev, pager, next,jumper"
                @current-change="handlePageChange"
                :total="total">
            </el-pagination>
        </div>
      </div>
    </div>
  </template>
  <script>
  import {getNewsDetails,getNewsList} from "@/api/web_api"
  import moment from 'moment'
  export default {
    name:"webNews",
    data() {
      return {
        keys:0,
        page:{
          pageNum:1,
          pageSize:5,
        },
        newsList:[],
        total:0
      };
    },
    filters: {
        formatDate (value) {
            if (!value) {
            return ''
            }
            return moment(value).format("YYYY-MM-DD")
        },
        capitalize: function (value) {
            const nums = '90';
            if (!value) return '';
            value = value.replace(/<[^>]+>/g, '');
            if (value.length > nums) {
                return value.slice(0, nums) + '...';
            }
            return value;
        }
    },
    mounted() {
        this.loadList();
    },
    methods: {
        async loadList() {
            let params = {};
            params.pageNum = this.page.pageNum;
            params.pageSize = this.page.pageSize;
            params.statusFlag = "1";//1.开启 0.关闭
            const {code,data} = await getNewsList(params);
            if(code === 200){
              data.list.filter(v=>v.statusFlag === '1')
              this.newsList = data.list;
              this.total = data.total;
            }else{
              this.newsList = [];
              this.total = 0;
            }
        },
        handlePageChange(page) {
            this.page.pageNum = page;
            this.loadList();
        },
        findDetails(id){
          this.$router.push({
              path:'/web/newsDetails',
              query: {   
                  id: id
              } 
          });
        }
    }
  };
  </script>
